<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- DOM是为了定义html中的元素，获取内容，属性，样式等 -->
     <p class="box1">分流直下，<strong>三千尺</strong></p>
    <p class="box">1 1</p>
    <p class="box2">3 3</p>
    <div class="box3">44</div>
    
</body>
<script>
    const elm1 = document.querySelector('.box1');
    console.log(elm1.innerHTML);  //获取
    elm1.innerHTML = '大数据，<em>大智慧</em>，大未来'; //设置
    console.log(elm1.innerText);
    elm1.innerText = '分流直下，<strong>三千尺</strong>';
    console.log(elm1.textContent);
    elm1.textContent = '大数据，<em>大智慧</em>，大未来';
    const elm2 = document.querySelector('.box3');
    console.log(elm2.innerHTML); //返回结果包含HTML标签，并保留空格和换行
    console.log(elm2.innerText); //去除HTML标签和多余的空格，换行
    console.log(elm2.textContent); //保留空格和换行
    
    
    
</script>
</html>